<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-for -->
      <ul>
        <li v-for="(item,index) in fruits">{{ item }}----{{ index }}</li>
      </ul>
      <div>
        <p v-for="(value,key,index) in persons">
          {{ value }} === {{ key }} === {{ index }}
        </p>
      </div>

      <!-- v-on -->
      <button v-on:click="fn('你好')">点击</button>
      <button @click="fn('哈哈')">点击</button>

      <a href="https://www.baidu.com" @click.prevent="toClick($event)">跳转</a>

	  <input type="text" @keyup.enter="jpsj">

	<!-- v-model -->
		<form action="">
			<div>
			<label for="">用户名：</label>
			<input type="text" name="" id="user"  v-model="user">
			<span>{{user}}</span>
			</div>
			<div>
				<label for="">密码：</label>
				<input type="password" name="" id="password" v-model="password" >
				<span>{{password}}</span>
			</div>
		</form>

    </div>
    <script src="./vue.js"></script>
    <script>
      /*
		7、v-for:用来变厉数组或者对象
			语法：v-for="(item,index) in obj"
			item:数组的每一项
			index：索引、下标

			遍厉对象
			v-for="(value,key,index) in obj"
			value:值
			key:键
			index：索引、下标

		8、v-on：绑定事件
		  语法：v-on:事件名称(不加on) ="函数名"
		  简写：@事件名称="函数名"
		  如果需要传参 函数名(paraml,param2,.....)

		  修饰符：写在事件名称后面用.表示
		    阻止默认事件   .prevent
			取消冒泡    .stop
			键盘修饰符  keyCode  .13 回车键  .Esc 返回  .enter 回车键

			事件详情: 传人 $event

		9、v-model:给表单元素绑定的指令，不能绑定普通元素 ，表单元素会忽略value属性，把实力上
		*/
      //创建vue实力启动应用
      var vm = new Vue({
        //配置对象
        el: '#app',
        data: {
          //所有数据
          //数据直接挂载的实力上的
          message: 'hello',
          fruits: ['apple', 'orange', 'banana'],
          persons: {
            name: 'leo',
            age: '23',
            job: 'woeke'
          },
		  user:'111',
		  password:'222'
        },
        methods: {
          //挂载方法的
          fn(msg) { 
            alert(msg);
          },
          // fn: function(){
          // 	alert('123')
          // }
		  toClick(ev){
			//   alert(1)
			console.log(ev)
		  },
		 jpsj(){
			 alert(1)
		 }
        }
      });
      console.log(vm);
      console.log(vm.$el);
      console.log(vm.message);
    </script>
  </body>
</html>

